<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字速度测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #test-text {
            font-size: 18px;
            margin-bottom: 20px;
            user-select: none; /* 禁止复制 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        .correct {
            color: green;
        }
        .incorrect {
            color: red;
        }
        #input-text {
            width: 80%;
            height: 60px;
            font-size: 22px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #result {
            margin-top: 20px;
        }
        #stats {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <center><h1>打字速度测试平台</h1></center>
    <p id="test-text"></p>
    <textarea id="input-text" placeholder="请在这里输入..." oninput="checkTyping()" disabled></textarea>
    <div id="stats">
        <p>用时：<span id="time-spent">0.00</span> 秒</p>
        <p>已输入字数：<span id="char-count">0</span> 个</p>
        <p>速度：<span id="speed">0.00</span> 字/分钟</p>
    </div>
    <div id="result"></div>
    <script>
        // 测试文本
        const testText = "钱塘江大潮，自古以来被称为天下奇观。农历八月十八是一年中传统的观潮日。这一天早上，我们来到了海宁市的盐官镇，据说这里是观潮最好的地方。我们随着观潮的人群，登上了海塘大堤。宽阔的钱塘江横卧在眼前。江面很平静，越往东越宽，在雨后的阳光下，笼罩着一层蒙蒙的薄雾。镇海古塔、中山亭和观潮台屹立在江边。远处，几座小山在云雾中若隐若现。江潮还没有来，海塘大堤上早已人山人海。大家昂首东望，等着，盼着。午后一点左右，从远处传来隆隆的响声，好像闷雷滚动。顿时人声鼎沸，有人告诉我们，潮来了！我们踮着脚往东望去，江面还是风平浪静，看不出有什么变化。过了一会儿，响声越来越大，只见东边水天相接的地方出现了一条白线，人群又沸腾起来。那条白线很快地向我们移来，逐渐拉长，变粗，横贯江面。再近些，只见白浪翻滚，形成一堵两丈多高的水墙。浪潮越来越近，犹如千万匹白色战马齐头并进，浩浩荡荡地飞奔而来；那声音如同山崩地裂，好像大地都被震得颤动起来。霎时，潮头奔腾西去，可是余波还在漫天卷地般涌来，江面上依旧风号浪吼。过了好久，钱塘江才恢复了平静。看看堤下，江水已经涨了两丈来高了。";
        // 每行60个字拆分文本
        const lines = [];
        const lineLength = 60;
        for (let i = 0; i < testText.length; i += lineLength) {
            lines.push(testText.slice(i, i + lineLength));
        }
        let currentLine = 0;
        let startTime = null;
        let timer = null;
        // 初始化输入框和计时器
        document.getElementById("input-text").disabled = false;
        document.getElementById("test-text").innerText = lines[currentLine];
        function checkTyping() {
            const inputText = document.getElementById("input-text").value;
            const currentTestLine = lines[currentLine];
            const inputArray = inputText.split("");
            const testTextArray = currentTestLine.split("");
            // 开始计时
            if (startTime === null) {
                startTime = new Date().getTime();
                timer = setInterval(updateStats, 100); // 每100ms更新一次
            }
            // 检查输入文本并标记正确和错误
            let formattedText = "";
            for (let i = 0; i < testTextArray.length; i++) {
                if (i < inputArray.length) {
                    if (testTextArray[i] === inputArray[i]) {
                        formattedText += `<span class="correct">${testTextArray[i]}</span>`;
                    } else {
                        formattedText += `<span class="incorrect">${testTextArray[i]}</span>`;
                    }
                } else {
                    formattedText += testTextArray[i];
                }
            }
            document.getElementById("test-text").innerHTML = formattedText;

            // 检查是否完成输入当前行
            if (inputText === currentTestLine) {
                currentLine++; // 输入正确，跳转到下一行
                if (currentLine < lines.length) {
                    document.getElementById("input-text").value = ""; // 清空输入框
                    document.getElementById("test-text").innerText = lines[currentLine]; // 显示下一行
                } else {
                    clearInterval(timer); // 完成所有行，停止计时
                    calculateResults();
                }
            }
        }
        function updateStats() {
            const inputText = document.getElementById("input-text").value;
            const elapsedTime = (new Date().getTime() - startTime) / 1000; // 用时（秒）
            const charCount = inputText.length; // 已输入字数
            const speed = (charCount / 5) / (elapsedTime / 60); // 速度：字/分钟（假设5个字母=1个单词）
            document.getElementById("time-spent").innerText = elapsedTime.toFixed(2);
            document.getElementById("char-count").innerText = charCount;
            document.getElementById("speed").innerText = speed.toFixed(2);
        }
        function calculateResults() {
            const inputText = document.getElementById("input-text").value;
            const correctCharacters = testText.split("").filter((char, i) => char === inputText[i]).length;
            const correctRate = (correctCharacters / testText.length) * 100;
            const elapsedTime = (new Date().getTime() - startTime) / 1000; // 用时（秒）
            const finalSpeed = (inputText.length / 5) / (elapsedTime / 60); // 最终速度
            const resultDiv = document.getElementById("result");
            resultDiv.innerHTML = `
                <p>测试完成！</p>
                <p>正确率: ${correctRate.toFixed(2)}%</p>
                <p>最终速度: ${finalSpeed.toFixed(2)} 字/分钟</p>
                <p>总用时: ${elapsedTime.toFixed(2)} 秒</p>
            `;
            // 禁用输入框，防止继续输入
            document.getElementById("input-text").disabled = true;
        }
    </script>
    <a></a>
</body>
</html>
